<template>
  <div class="page-my-center">
      <div class="top_bg">
        <div class="top_title" @click="Navite('jumpToSetting')">
            <div>
                <img src="../public/imgs/setting.png" alt="" class="icon_setting" >
            </div>
        </div>
        <div class="personal_des">
          <div class="pic" @click="Navite()">
                <img :src="personal.userImg" alt="" class="icon_setting" v-show="personal.userImg">
              <img src="../public/imgs/default_header.png" alt="" v-show="!personal.userImg">
                <span class="nanme" v-show="personal.realname">
                    {{personal.realname}}
                 </span>
                 <span class="nanme" v-show="!personal.realname">
                    未登录<br/>
                    <span class="no_login">
                     注册即送新手礼包
                    </span>
                 </span>
          </div>
        </div>
      </div>

      <div class="icon_nav">
        <div class="item">
            <img src="../public/imgs/E1.png" alt="" class="e1" @click="jumpcase('jumpToAddBankCard')">
            <div>银行卡</div>
        </div>
        <div ass="item" @click="Navite('jumpToCoupon')">
            <img src="../public/imgs/E2.png" alt="" class="e2">
             <div>优惠券</div>
        </div>
        <div ass="item" @click="Navite('jumpCashbonus')">
            <img src="../public/imgs/E3.png" alt="" class="e3">
             <div>现金红包</div>
        </div>
      </div>
      <div class="assets">
         <div class="item">
           <div>
               <div class="gray"> 总资产(元)</div>
               <div class="number ">{{wallet.totalAssets}}<span class="eye" @click="close()"><img src="../public/imgs/eye1.png" alt="" v-show="isclick" ><img src="../public/imgs/eye21.png" alt="" v-show="!isclick"></span></div>
           </div>
           <div style="margin-right:1.5rem">
               <div class="gray">已收收益(元)</div>
               <div class="number red">{{wallet.recoveredInterest}}</div>
           </div>
         </div>
         <div class="item">
           <div>我的余额</div>
            <div class="gray">{{wallet.balance}}元</div>
         </div>
         <div class="item" style="border-bottom:none">
           <div class="btn_c btn" @click="jumpcase('jumpToRecharge')">充值</div>
            <div class="btn_b btn" @click="jumpcase('jumpToWithdrawal')">提现</div>
         </div>
      </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      sessionId: "",
      personal: {
        bindCard: 0
      },
      isclick:true,
      wallet: {
        totalAssets: "0.00",
        recoveredInterest: "0.00",
        balance: "0.00"
      },
      copy:{
          totalAssets: "0.00",
        recoveredInterest: "0.00",
        balance: "0.00"
      }
    };
  },
  created() {
    this.Uitis.getInfo().then(res => {
      if (res.uId == "") {
        this.sessionId = "";
      } else {
        this.sessionId = res.sessionid;
        this.$http
          .get(this.Interface.getUserDetail, {
            params: { sessionid: this.sessionId }
          })
          .then(res => {
            if (res.data.success) {
              this.personal = res.data.data;
            }
          });
        this.$http
          .get(this.Interface.getWalletAccount, {
            params: { sessionid: this.sessionId }
          })
          .then(res => {
            if (res.data.success) {
              this.wallet = res.data.data;
              this.copy=res.data.data;
            }
          });
      }
    });
  },
  mounted() {},
  methods: {
    Navite(url) {
      if (this.sessionId == "") {
        this.Uitis.JumpNavite("jumpToLogin");
      } else {
        if(url){
        this.Uitis.JumpNavite(url);
        }
      }
    },
    close(){
      if(!this.isclick){
        this.wallet=this.copy;
      }else{
        this.wallet={
        totalAssets: "****",
        recoveredInterest: "****",
        balance: "****"
        }
      }
    this.isclick=!this.isclick
    },
    jumpcase(url) {
      if (this.sessionId == "") {
        this.Uitis.JumpNavite("jumpToLogin");
      } else {
        if (this.personal.bindCard == 0) {
          this.Uitis.JumpNavite("jumpToAddBankCard");
        } else {
          this.Uitis.JumpNavite(url);
        }
      }
    }
  }
};
</script>
<style lang="less">
html,
body {
  height: 100%;
  background: #f4f4f4;
}
.page-my-center {
  .top_bg {
    background: url(../public/imgs/detail_bg.png) no-repeat;
    width: 100%;
    background-size: contain;
    height: 4.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding: 70px 30px 55px 30px;
    box-sizing: border-box;
    .top_title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-content: center;
      .icon_setting {
        width: 40px;
        height: 42px;
      }
    }
    .personal_des {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .pic {
        display: flex;
        align-items: center;
        img {
          width: 120px;
          height: 120px;
          margin-right: 50px;
        }
        .nanme {
          font-size: 38px;
          color: #fff;
          .no_login {
            font-size: 24px;
            color: #e5b673;
          }
        }
      }
    }
  }
  .icon_nav {
    margin-bottom: 15px;
    border-bottom: 1px solid #d6d6d6;
    background: #fff;
    padding: 40px 80px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    text-align: center;
    font-size: 24px;
    color: #333;
    img {
      margin-bottom: 25px;
    }
    .e1 {
      width: 50px;
      height: 37px;
    }
    .e2 {
      width: 50px;
      height: 38px;
    }
    .e3 {
      width: 48px;
      height: 41px;
    }
  }
  .assets {
    border-top: 1px solid #d6d6d6;
    border-bottom: 1px solid #d6d6d6;
    background: #fff;
    .item {
      box-sizing: border-box;
      padding: 35px 30px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      border-bottom: 1px solid #d6d6d6;
      .gray {
        font-size: 24px;
        color: #666666;
      }
      .number {
        margin-top: 30px;
        font-weight: 300;
        font-size: 40px;
        .eye {
          margin-left: 30px;
          img {
            width: 33px;
            height: 22px;
          }
        }
      }
      .red {
        color: #ff5462;
      }
      .btn {
        width: 320px;
        height: 70px;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        line-height: 70px;
      }
      .btn_c {
        background: #eac58f;
      }
      .btn_b {
        background: #5261f7;
      }
    }
  }
}
</style>
